<template>
	<view class="userLogon" >
		<view class="userText" v-if="customer != null">
			<text class="userText01">用户{{customer}}邀请你</text>
			<text class="userText02">共开盲盒共赢大奖，快来领取新手福利吧</text>
		</view>
		<view class="zcBox">
			<view class="tel">
				<text>手机号</text>
				<input type="text" v-model="phone" maxlength="11" placeholder="请输入手机号码"
					placeholder-class="placeholderClass">
			</view>
			<view class="code">
				<view class="tel">
					<text>验证码</text>
					<input type="text" v-model="smscode" maxlength="6" placeholder="请输入验证码"
						placeholder-class="placeholderClass">
				</view>
				<register-code :seconds="seconds" ref="verCode" @start="start" @end="end" :phone="phone">
				</register-code>
			</view>
			<view class="zcBox_bottom">
				<view class="gou">
					<view class="image-box" @click="gouFunc">
						<image :src="status?'/static/blindbox/gou01.png':'/static/my/gou_no.png'" mode=""></image>
					</view>
					<text>我已阅读并同意签署<text @click="jumptext(1)">《神椰隐私保护协议》</text><text @click="jumptext(2)">《神椰用户服务协议》</text></text>
				</view>
				<view class="button_box">
					<view class="button_name" @click="register">立即注册</view>
				</view>
			</view>

		</view>
		<!-- 		<view class="userbg">
			<image class="imgBox" src="/static/blindbox/daily-tasks05.png" mode="widthFix"></image>
		</view> -->

	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				customer: null,
				smscode: '',
				phone: '',
				wxCode: '',
				status: false,
				seconds: 60, //倒计时时间
			}
		},
		onHide() {
			// uni.removeStorageSync('localCode');
		},
		onLoad(e) {
			if (e.inviterCustomerId != undefined) {
				uni.setStorageSync('inviterCustomerId', e.inviterCustomerId);
			}
			// this.$nextTick(() => {
			// 	//首页跳转返回 IOS不兼容页面自动刷新问题
			// 	var u = navigator.userAgent,
			// 		app = navigator.appVersion;
			// 	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
			// 	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			// 	if (isiOS) {
			// 		window.onpageshow = function(event) {
			// 			if (event.persisted) {
			// 				window.location.reload()
			// 			}
			// 		};
			// 	}
			// })
			
		},
		mounted() {

		},
		onShow() {
			// const urlCode = this.getUrlParam('code');
			// const localCode = this.$queue.getData('localCode')
			// if ((urlCode == null || urlCode == '' || urlCode == undefined) && !localCode) {
			// 	app.getLogin()
			// } else if (urlCode) {
			// 	uni.setStorageSync('localCode', urlCode);
			// 	window.history.go(-1)
			// } else {
			// 	this.wxCode = uni.getStorageSync('localCode');
			// 	uni.removeStorageSync('localCode')
			// 	const inviterCustomerId = this.$queue.getData('inviterCustomerId')
			// 	this.$api.getReferrerCustomer(inviterCustomerId).then(res => {
			// 		this.customer = res.result
			// 	})

			// }
			this.wxCode = this.getUrlParam('code')
			// var codeData = this.$queue.getData('localCode')
			
			if (this.wxCode == null || this.wxCode == '' || this.wxCode == undefined ) {
				app.getLogin()
			}else if(uni.getStorageSync('localCode') == this.wxCode){
				app.getLogin()
			}
			else{
				uni.setStorageSync('localCode', this.wxCode);
				const inviterCustomerId = uni.getStorageSync('inviterCustomerId')
				this.$api.getReferrerCustomer(inviterCustomerId).then(res => {
					this.customer = res.result
				})
			}
			if(uni.getStorageSync('reTel') != undefined){
				this.phone = uni.getStorageSync('reTel')
			}

		},
		methods: {
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
				var r = window.location.search.substr(1).match(reg)
				if (r != null) return unescape(r[2])
				return null
			},
			end() {
				console.log('结束')
			},
			// 倒计时
			async start() { //获取验证码
				console.log('开始')
				let phone = this.phone
				const res = await this.$api.sendCodeBtn(phone);
				this.$queue.setData('reTel',this.phone)
				uni.showToast({
					icon: 'none',
					title: '发送成功,请注意查看短信'
				})
			},
			gouFunc() {
				this.status = !this.status
			},
			jumptext(e) { //1:隐私协议，2：服务协议
				uni.navigateTo({
					url: '/pages/login/text-box?type=' + e
				})
			},
			// 效验参数
			async register() {
				if (this.phone == '') {
					this.$queue.showToast('请输入手机号码');
					return false;
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$queue.showToast('请输入正确的手机号');
					return false;
				} else if (this.smscode == '') {
					this.$queue.showToast('请输入手机验证码');
					return false;
				} else if (!this.status) {
					this.$queue.showToast('请勾选协议');
					return false;
				}

				var data = {
					phone: this.phone,
					code: this.smscode,
					wxCode: this.wxCode,
					inviterCustomerId: this.$queue.getData('inviterCustomerId'),
					source:1
				}
				uni.showLoading({
					title: '注册中'
				})
				try {
					const res = await this.$api.login(data);
					this.$queue.setData('token', res.result.token)
					this.$queue.setData('isRealName', res.result.isRealName)
					uni.removeStorageSync('reTel');
					if (res.result.isRealName) {
						this.$queue.showToast('登录成功')
						setTimeout(() => {
							uni.reLaunch({
								// url: '/pages/pay/blindbox'
								url: '/pages/index/index'
							})
						}, 800)
					} else {
						this.$queue.showToast('请实名！')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/my/certification/certification?isRealName=' + res.result
									.isRealName + '&blindboxStatus=' + true
							})
						}, 1000)

					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(() => {
						uni.hideLoading()
					}, 2000)
				}
			},
		}
	}
</script>

<style scoped>
	.userLogon {
		width: 750rpx;
		height: 1460rpx;
		background: url("/static/blindbox/daily-tasks05.png") no-repeat;
		background-size: 100% 100%;
		padding-top: 480rpx;
		box-sizing: border-box;
	}

	.header {
		width: 750rpx;
	}

	.userbg {
		width: 100%;
	}

	.userText {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.userText02 {
		margin-top: 14rpx;
		font-size: 32rpx;
		margin-bottom: 48rpx;
	}

	.zcBox {
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 28rpx #E4673D;
		border-radius: 8rpx 100rpx;
		padding: 90rpx 44rpx 80rpx 44rpx;
		box-sizing: border-box;
		/* 		display: flex;
		flex-direction: column;
		align-items: center; */
	}

	.zcBox .tel {
		width: 602rpx;
		height: 88rpx;
		background: #FFF8F5;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		color: #222222;
	}

	.zcBox .tel text {
		padding-right: 26rpx;
		width: 96rpx;
		display: inline-block;
	}

	.placeholderClass {
		color: #BCBCBC;
		font-size: 32rpx;
	}

	.zcBox .code {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		/* align-self: flex-start; */
	}

	.zcBox .code .tel {
		width: 400rpx;
	}

	.zcBox .code .tel input {
		width: 220rpx;
	}

	/*  */
	.zcBox_bottom {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.gou {
		font-size: 24rpx;
		color: #444444;
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		margin-top: 120rpx;

	}

	.image-box {
		width: 26rpx;
		height: 26rpx;
		display: flex;
		align-items: center;
		margin-right: 12rpx;
	}

	.gou image {
		width: 20rpx;
		height: 20rpx;
		margin-top: 4rpx;
	}

	/* 登录按钮 */
	.button_box {
		margin-top: 26rpx;
	}

	.button_name {
		width: 402rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF9A3D 3.08%, #FD5D04 100%);
		box-shadow: 0px 8rpx 10rpx rgba(255, 96, 11, 0.2);
		border-radius: 152rpx;
		font-size: 34rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>
